<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../plugins/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../plugins/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">


    <link rel="stylesheet" href="../plugins/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css"/>

    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-light pt-2">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <h5 class="card-title">年份选择</h5>
            <div class="input-group mb-3" id="datetimepicker1">
                <input type="text" class="form-control" readonly>
                <span class="input-group-text"><i class="bi bi-calendar"></i></span>
            </div>


            <h5 class="card-title">年月选择</h5>
            <div class="input-group mb-3" id="datetimepicker2">
                <input type="text" class="form-control" readonly>
                <span class="input-group-text"><i class="bi bi-calendar"></i></span>
            </div>

            <h5 class="card-title">年月日选择</h5>
            <div class="input-group mb-3" id="datetimepicker3">
                <input type="text" class="form-control" readonly>
                <span class="input-group-text"><i class="bi bi-calendar"></i></span>
            </div>

            <h5 class="card-title">年月日时分秒选择</h5>
            <div class="input-group mb-3" id="datetimepicker4">
                <input type="text" class="form-control" readonly>
                <span class="input-group-text"><i class="bi bi-calendar"></i></span>
            </div>

            <h5 class="card-title">时刻选择</h5>
            <div class="input-group mb-3" id="datetimepicker5">
                <input type="text" class="form-control" readonly>
                <span class="input-group-text"><i class="bi bi-calendar"></i></span>
            </div>


            <h5 class="card-title">区间选择</h5>

            <div class="row">
                <div class="col">
                    <div class="input-group mb-3" id="datetimepicker6">
                        <input type="text" class="form-control" readonly>
                        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group mb-3" id="datetimepicker7">
                        <input type="text" class="form-control" readonly>
                        <span class="input-group-text"><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<script src="../plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>

<!--插件js-->
<script src="../plugins/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../plugins/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
<script src="../plugins/@eonasdan/tempus-dominus/dist/plugins/customDateFormat.js"></script>
<script src="../plugins/moment/min/moment.min.js"></script>


<script>
    //自定义日期格式插件
    tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);

    //年份选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
        //本地化控制
        localization: {
            format: 'yyyy',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'years',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: false,
                //支持日期选择
                date: false,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: false,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: false,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });

    //年月选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'years',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: false,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: false,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: false,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });

    //年月日
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'years',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: false,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: false,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });

    //年月日时分秒
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'calendar',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: true,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });

    //时刻选择
    new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'), {
        //本地化控制
        localization: {
            format: 'HH:mm',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'clock',
            components: {
                decades: false,
                //是否开启日历，false:则是时刻模式
                calendar: false,
                //支持年份选择
                year: false,
                //是否开启月份选择
                month: false,
                //支持日期选择
                date: false,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: false,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
        }
    });

    let td6 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker6'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'calendar',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: true,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    let td7 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker7'), {
        //本地化控制
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
        },
        //布局控制
        display: {
            //视图模式(选择年份视图最先开始)
            viewMode: 'calendar',
            components: {
                //是否开启日历，false:则是时刻模式
                calendar: true,
                //支持年份选择
                year: true,
                //是否开启月份选择
                month: true,
                //支持日期选择
                date: true,
                //底部按钮中那个时刻选择是否启用，false则表示隐藏，下面三个需要该选项为true时有效
                clock: true,
                //时
                hours: true,
                //分
                minutes: true,
                //秒
                seconds: true,
                //是否使用24小时制,比如3.15分会变成15.15
                useTwentyfourHour: true,
            },
            //图标
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            //视图底部按钮
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    td6.subscribe(tempusDominus.Namespace.events.change, (e) => {
        td7.updateOptions({
            restrictions: {
                minDate: e.date,
            },
        });
    });
    td7.subscribe(tempusDominus.Namespace.events.change, (e) => {
        td6.updateOptions({
            restrictions: {
                maxDate: e.date,
            },
        });
    });
</script>
</body>
</html>